<template>
  <el-card class="home-data-base">
    <div class="title">数据概况</div>
    <el-row style="margin-top: 24px;">
      <el-col :span="8" class="num-item" style="border-bottom: 1px solid #F4F4F4;border-right: 1px solid #F4F4F4;padding-top: 0;" @click.native="toPublishOrder">
        <div class="num">{{ dataBase.publishOrder | bigDataFilter }}</div>
        <div class="name">待发布订单</div>
      </el-col>
      <el-col :span="8" class="num-item" style="border-bottom: 1px solid #F4F4F4;border-right: 1px solid #F4F4F4;padding-top: 0;" @click.native="toAccountOrder">
        <div class="num">{{ dataBase.accountOrder | bigDataFilter }}</div>
        <div class="name">待审批订单</div>
      </el-col>
      <el-col :span="8" class="num-item" style="border-bottom: 1px solid #F4F4F4;padding-top: 0;" @click.native="toCheckOrder">
        <div class="num">{{ dataBase.checkOrder | bigDataFilter }}</div>
        <div class="name">待封账订单</div>
      </el-col>
      <el-col :span="8" class="num-item" style="border-right: 1px solid #F4F4F4;padding-bottom: 0;" @click.native="toResource">
        <div class="num">{{ dataBase.resourceNum | bigDataFilter }}</div>
        <div class="name">账号资源数</div>
      </el-col>
      <el-col :span="8" class="num-item" style="border-right: 1px solid #F4F4F4;padding-bottom: 0;" @click.native="toClient">
        <div class="num">{{ dataBase.clientNum | bigDataFilter }}</div>
        <div class="name">客户总数</div>
      </el-col>
      <el-col :span="8" class="num-item" style="padding-bottom: 0;" @click.native="toSupplier">
        <div class="num">{{ dataBase.supplierNum | bigDataFilter }}</div>
        <div class="name">供应商总数</div>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
import { bigDataFilter } from '@/filters/number';
import { ROUTER_TYPES, hasRouteAuth } from '@/utils/permission';
import ElMessage from '@/utils/message';
const resourceAuth = [...ROUTER_TYPES.MEDIUMORDER, ...ROUTER_TYPES.MEDIUM_RESOURCE, ROUTER_TYPES.CRM_SUBCRIBE];
export default {
  filters: { bigDataFilter },
  props: {
    dataBase: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    hasRouteAuth,
    orderAuth() {
      if (!this.hasRouteAuth('crm:orderList:read')) {
        ElMessage.warning('您暂无该页面权限，请到用户管理-权限管理进行设置或联系管理员');
        return false;
      }
      return true;
    },
    toOrder(query) {
      this.$router.push({
        name: 'allOrder',
        query
      });
    },
    toPublishOrder() {
      if (!this.orderAuth()) {
        return false;
      }
      const query = {
        process: 1
      };
      this.toOrder(query);
    },
    toAccountOrder() {
      if (!this.orderAuth()) {
        return false;
      }
      const query = {
        process: 3
      };
      this.toOrder(query);
    },
    toCheckOrder() {
      if (!this.orderAuth()) {
        return false;
      }
      const query = {
        process: 4
      };
      this.toOrder(query);
    },
    toResource() {
      if (!this.hasRouteAuth(resourceAuth)) {
        ElMessage.warning('您暂无该页面权限，请到用户管理-权限管理进行设置或联系管理员');
        return false;
      }
      this.$router.push({
        name: 'resource'
      });
    },
    toClient() {
      if (!this.hasRouteAuth('crm:customer:read')) {
        ElMessage.warning('您暂无该页面权限，请到用户管理-权限管理进行设置或联系管理员');
        return false;
      }
      this.$router.push({
        name: 'customer'
      });
    },
    toSupplier() {
      if (!this.hasRouteAuth('medium:supplier:read')) {
        ElMessage.warning('您暂无该页面权限，请到用户管理-权限管理进行设置或联系管理员');
        return false;
      }
      this.$router.push({
        name: 'supplierManage'
      });
    }
  }
};
</script>
<style lang="scss">
.home-data-base {
  box-shadow: 2px 2px 8px 0px #DDE1EA;
  border-radius: 4px;
  margin-bottom: 12px;
  margin-top: 12px;
  height: 260px;
  .el-card__body {
    padding: 13px 20px 21px;
    .title {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .num-item {
      padding: 20px 0;
      cursor: pointer;
      .num {
        font-size: 24px;
        font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
        font-weight: 500;
        color: #5F77C3;
        margin-bottom: 10px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .name {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        text-align: center;
      }
    }
  }
}
</style>
